<script setup>
import MenuView from "./MenuView.vue";
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>教务管理系统</el-header>
      <el-container>
        <el-aside>
          <MenuView />
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
      <el-footer class="f">湖北开放职业学院</el-footer>
    </el-container>
  </div>
</template>

<style scoped>
div.common-layout {
  width: 100%px;
  height: 600px;
  background-color: #9286b2a3;
  border-right: 2px solid rgb(137, 132, 132);
}

div.common-layout .el-header {
  text-align: center;
  height: 80px;
  line-height: 40px;
  font-size: 24px;
  border: 2px solid rgb(137, 132, 132);
  background-color: rgb(49, 33, 79);
}

div.common-layout .el-aside {
  width: 180px;
  height: 520px;
}
.f {
  width: 1216px;
  text-align: center;
  height: 80px;
  line-height: 70px;
  background-color: rgb(49, 33, 79);
  border: 2px solid rgb(137, 132, 132);
}
</style>
